<template>
  <div class="app-container">
    <!-- 左半边所有签到记录 -->
    <div class="index_left">
      <div id="allpie"></div>
      <div id="allbar"></div>
    </div>

    <!-- 右半边近日签到记录 -->
    <div class="index_right">

    </div>
  </div>
</template>

<script setup name="Index">
  import * as echarts from 'echarts';
  import { ref , onMounted } from 'vue';

  /**
   * 左上角饼图
   */
  const pie = ref({
    title: {
      text: '整个学期签到情况',
      left: 'left',
      top:5
    },
    legend: {
      orient: 'vertical',
      left: 'left',
      top:40
    },
    series: [
      {
        type: 'pie',
        radius: ['35px','75px'],
        padAngle: 15,
        itemStyle: {
          borderRadius: 3
        },
        data: [
          { value: 85, name: '签到率' },
          { value: 5, name: '请假率' },
          { value: 10, name: '旷课率' },
        ],
        center:["70%","50%"],
        label: {
          show: false,
          position: 'center'
        },
        emphasis: {
          label: {
            show: true,
            fontSize: '14',
            fontWeight: 'bold',
            formatter: '{b}率:{c}%'
          },
          itemStyle: {
            shadowBlur: 10,
            shadowOffsetX: 0,
            shadowColor: 'rgba(0, 0, 0, 0.5)'
          }
        }
      }
    ]
  })

  /**
   * 左下角柱状图
   */
  const allbar = ref({
    title: {
      text: '整个学期班级签到情况',
      left: 'left',
      top:5
    },
    legend: {
      left: 'center',
      top:30
    },
    tooltip: {
      trigger: 'axis',
      axisPointer: {
        type: 'shadow'
      }
    },
    grid: {
      left: '3%',
      right: '8%',
      bottom: '3%',
      containLabel: true
    },
    xAxis: [
      {
        type: 'value'
      }
    ],
    yAxis: [
      {
        type: 'category',
        data: ['休闲体育2301班', '休闲体育2401班', '体教2301班', '体教2303班', '体教2302班', '体教2304班', '体教2402班','体教2402班', '计算机高本贯通2401班', '计算机2401班', '网络2401班', '物联网2401班', '物联网2202班', '网络2401班','休闲体育2301班', '休闲体育2401班', '体教2301班', '体教2303班', '体教2302班', '体教2304班', '体教2402班','体教2402班', '计算机高本贯通2401班', '计算机2401班', '网络2401班', '物联网2401班', '物联网2202班', '网络2401班'],
        axisTick: {
          alignWithLabel: true,
          fontSize:10
        }
      }
    ],
    series: [
      {
        name: '签到率',
        type: 'bar',
        barWidth: '80%',
        data: [10, 52, 200, 334, 390, 330, 220],
        stack:"x",
        label:{show:true},
        emphasis: {
          focus: 'series'
        },
        itemStyle:{
          barBorderRadius:1
        }
      },
      {
        name: '请假率',
        type: 'bar',
        barWidth: '80%',
        data: [200, 52, 52, 10, 10, 10, 52],
        stack:"x",
        label:{show:true},
        emphasis: {
          focus: 'series'
        },
        itemStyle:{
          barBorderRadius:1
        }
      },
      {
        name: '旷课率',
        type: 'bar',
        barWidth: '80%',
        data: [200, 52, 52, 10, 10, 10, 52],
        stack:"x",
        label:{show:true},
        emphasis: {
          focus: 'series'
        },
        itemStyle:{
          barBorderRadius:1
        }
      }
    ]
})

  function initechars() {
    echarts.init(document.getElementById('allpie')).setOption(pie.value)
    echarts.init(document.getElementById('allbar')).setOption(allbar.value)
  }

  onMounted(() => {
    initechars()
  })
</script>

<style scoped lang="scss">
  .app-container{
    display: flex;
    padding: 10px;
    background-color: #f3f3f3;
  }

  .index_left {
    flex: 2;
    margin-right: 10px;

    #allpie{
      padding: 3px;
      width: 100%;
      height: 180px;
      background-color: #fff;
      border-radius: 5px;
    }

    #allbar{
      margin-top: 10px;
      padding: 3px;
      width: 100%;
      height: 800px;
      background-color: #fff;
      border-radius: 5px;
    }
  }
  .index_right {
    flex: 4;
    height: 100%;
  }
</style>

